{# 引用通用页面模板 #}
{% extends 'pageMould.html' %}
{# 加载静态资源库 #}
{% load staticfiles %}

{# 链接CSS文件 #}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{# head链接JS文件 #}
{% block head-js %}

{% endblock %}

{# 链接 meta 文件 #}
{% block meta %}

{% endblock %}

{# 页面标题 #}
{% block PageTitle %}
    地质云
{% endblock %}

{# 浮动栏 #}
{% block fixed %}
    <div id="blackScreen"></div>

    <div class="container-fluid">
        <form id="addNodeBox" class="formBox" action="/graph/add_node/" method="get">
            <h5>添加结点信息</h5>

            <p>
                name: <input name="add_node_name" type="text">
            </p>

            <p>
                belong_to: <input name="add_belong_to" type="text">
            </p>

            <p>
                desc: <input name="add_desc" type="text">
            </p>

            <p>
                identifier: <input name="add_identifier" type="text">
            </p>

            <p>
                category: <input name="add_category" type="text">
            </p>

            <input id="addNodeSubmit" type="submit" value="提交">
        </form>

        <form id="addEdgeBox" class="formBox" action="/graph/add_edge/" method="get">
            <h5>添加关系边信息</h5>

            <p>
                source: <input name="add_source" type="text">
            </p>

            <p>
                target: <input name="add_target" type="text">
            </p>

            <p>
                value: <input name="add_value" type="text">
            </p>

            <input id="addEdgeSubmit" type="submit" value="提交">
        </form>

        <form id="changeBox" class="formBox" action="/graph/update_node/" method="get">
            <h5>修改结点信息</h5>

            <p>
                name: <input id="update_node_name" name="update_node_name" type="text" readonly="true">
            </p>

            <p>
                belong_to: <input id="update_belong_to" name="update_belong_to" type="text">
            </p>

            <p>
                desc: <input id="update_desc" name="update_desc" type="text">
            </p>

            <p>
                identifier: <input id="update_identifier" name="update_identifier" type="text">
            </p>

            <p>
                category: <input id="update_category" name="update_category" type="text">
            </p>

            <input id="changeBoxSubmit" type="submit" value="提交">
        </form>
    </div>
{% endblock %}

{# 头部栏 #}
{% block header %}

{% endblock %}

{# 内容栏 #}
{% block content %}
    <div class="container-fluid">
        <div class="row contentBox">
            <div class="col-3 menuBox">
                <h5><i class="fa fa-list"></i>侧边栏</h5>

                {% for book in menu.bookMenu %}
                    <div class="bookMenu hasClick">
                        <p>
                            {% if menu.chapterMenu != "" %}
                                <i class="fa fa-chevron-right"></i>
                            {% endif %}
                            <span>{{ book }}</span>
                        </p>

                        {% for chapter in menu.chapterMenu %}
                            <div class="chapterMenu hasClick">
                                <p>
                                    {% if menu.summaryMenu != "" %}
                                        <i class="fa fa-chevron-right"></i>
                                    {% endif %}
                                    <span>{{ chapter }}</span>
                                </p>

                                {% for summary in menu.summaryMenu %}
                                    <div class="summaryMenu">
                                        <p>{{ summary }}</p>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

            <div class="graphBox" class="graphBox col-9">

                <div id="graph" class="col-9"></div>

                <div class="operator">
                    <button id="delete_node">删除结点</button>
                    <button id="add_node">添加结点</button>
                    <button id="add_edge">添加边</button>
                    <button id="update_node">修改结点</button>
                </div>

                <div class="dataBox">
                    <div id="nodeData" class="data">
                        <h5>结点信息</h5>

                        <p>
                            结点: <span id="node"></span>
                        </p>

                        <p>
                            所属: <span id="belong_to"></span>
                        </p>

                        <p>
                            结点描述: <span id="desc"></span>
                        </p>
                    </div>

                    <div id="edgeData" class="data">
                        <h5>关系边信息</h5>

                        <p>
                            value: <span id="edge"></span>
                        </p>

                        <p>
                            终点编号: <span id="source"></span>
                        </p>

                        <p>
                            源点编号: <span id="target"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{# 尾连接链接JS文件 #}
{% block footer-js %}
    <script id="indexJs" type="text/javascript" src="{% static 'js/graph/index.js' %}"
        echars_data='{{ data | safe }}'
        echars_link='{{ links | safe }}'
    ></script>
{% endblock %}
